<template>
  <div class="page-container">
    <div>
      <ex_header_spiler title="ex_super_table演示页面" />
      <h3 class="bold">介绍</h3>
      高阶表单,用于快速生成表格
      可应用所有el-table组件属性
      <div class="flex_row_center">
        继承el-form所有事件与属性
        <el-link class="mg_l2" href="https://element.eleme.cn/#/zh-CN/component/table" type="primary"
          target="_blank">相关链接</el-link>
      </div>
      <h3 class="bold">新增属性</h3>

      <el-table :data="com_attrs" style="width: 100%">
        <el-table-column prop="name" label="参数" width="200">
        </el-table-column>
        <el-table-column prop="remark" label="说明" min-width="200">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="200">
        </el-table-column>
        <el-table-column prop="enum" label="可选值" width="180">
        </el-table-column>
        <el-table-column prop="default" label="默认值" width="180">
        </el-table-column>
      </el-table>
      <h3 class="bold">model配置属性</h3>
      <el-table :data="com_model" style="width: 100%">
        <el-table-column prop="name" label="参数" width="200">
        </el-table-column>
        <el-table-column prop="remark" label="说明" min-width="200">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="200">
        </el-table-column>
        <el-table-column prop="enum" label="可选值" width="180">
        </el-table-column>
        <el-table-column prop="default" label="默认值" width="180">
        </el-table-column>
      </el-table>
      <h3 class="bold">operateArray</h3>
      <el-table :data="operateArray" style="width: 100%">
        <el-table-column prop="name" label="参数" width="200">
        </el-table-column>
        <el-table-column prop="remark" label="说明" min-width="200">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="200">
        </el-table-column>
        <el-table-column prop="enum" label="可选值" width="180">
        </el-table-column>
        <el-table-column prop="default" label="默认值" width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>



export default {
  title: "ex_super_table组件",
  data() {
    return {
      form: {},
      com_attrs: [
        { name: "model", remark: "用于快速生成表格的配置属性", type: "Array", },
        { name: "defaultColAttr", remark: "默认列属性", type: "Object", default: "" },
        { name: "attrs", remark: "绑定属性", type: "Object", },
        { name: "showIndex", remark: "展示序号行", type: "Boolean", },
        { name: "specialStyle", remark: "特殊样式", type: "Boolean", },
        { name: "pageChangeBefore", remark: "页面切换前回调", type: "Function", },
        { name: "defaultPageSize", remark: "默认页面大小", type: "Number", },
        { name: "simplePage", remark: "简易分页", type: "Boolean", },

        { name: "autoLoad", remark: "初始化自动请求", type: "Boolean", },
        { name: "url", remark: "数据请求url", type: "String", },
        { name: "autoPage", remark: "自动分页", type: "Boolean", },
        { name: "autoFill", remark: "初始化自动撑满", type: "Boolean", },
        { name: "autoFlex", remark: "弹性布局", type: "Boolean", },
        { name: "emptySlot", remark: "空视图插槽", type: "Boolean", },
        { name: "urlDataHandle", remark: "请求数据处理回调", type: "Function", },
        { name: "urlParams", remark: "请求参数处理回调", type: "Object,Function", },
        { name: "urlOption", remark: "请求配置处理", type: "Object", },


      ],
      com_model: [
        { name: "key", remark: "对应绑定属性名", type: "string" },
        { name: "label", remark: "对应标签", type: "string,function" },

        { name: "slot", remark: "插槽名称，定义后可嵌入对应名称插槽", type: "string" },
        { name: "slot_header", remark: "表头插槽名称，定义后可嵌入对应名称插槽", type: "string" },

        { name: "render", remark: "渲染函数内容，渲染单元格", type: "function(h,{row,column,index,list})" },


        { name: "type", remark: "列类型同原属性效果，新增了operate操作列类型", type: "string" },

        { name: "operate", remark: "只有type等于operate才有效果，定义操作列内容，定于在operateArray", type: "array" },

        { name: "if", remark: "是否出现", type: "boolean,function()" },
        { name: "propertyFilter", remark: "快速过滤属性，对key属性进行过滤", type: "string" },


      ],
      operateArray: [
        { name: "if", remark: "是否出现", type: "boolean,function(row,index)" },
        { name: "disabled", remark: "是否禁用", type: "boolean,function(row,index)" },
        { name: "attrs", remark: "按钮属性", type: "object" },
        { name: "class", remark: "按钮样式类", type: "string" },

        { name: "type", remark: "按钮类型", type: "string", enum: "list,more,confirm_button" },
        { name: "click", remark: "按钮事件", type: "function(row,index,list)" },

        { name: "items", remark: "当type为more或list时，展示按钮列表。", type: "array" },
        { name: "message", remark: "当type为confirm_button时，展示二次确认。", type: "string" },
        { name: "buttonClass", remark: "当type为confirm_button时，展示按钮类型。", type: "string" },
        { name: "confirmButtonType", remark: "当type为confirm_button时，展示二次确认按钮类型。", type: "string" },
        { name: "url", remark: "当type为confirm_button时，二次确认请求url。", type: "string" },
        { name: "urlType", remark: "当type为confirm_button时，二次确认请求urlType。", type: "string" },
        { name: "params", remark: "当type为confirm_button时，二次确认请求参数。", type: "object,function" },
        { name: "done", remark: "当type为confirm_button时，二次确认后回调,reload为刷新，tip为提示。", type: "string,function(row,index,list),array" },

      ],
    };
  },

};
</script>
<style  scoped></style>
